<script setup lang="ts">
import {
  NList,
  NListItem,
  NText,
  NCard,
  NFlex,
  NTag,
  NButton,
  NModal,
  NInput,
  NInputNumber,
} from "naive-ui";
import { rewardType } from "../mod/madle";
import { newReward, putReward, redeemReward } from "../apis/reward";
import naiveui from "../utils/naiveui";
import { ref, inject } from "vue";
import { useUserStore } from "../stores/userStore";
const userStore = useUserStore();
const props = defineProps<{ rewardList: rewardType[]; userid: number }>();
const handleReward = async (reward_id: number) => {
  const res = await redeemReward(reward_id, props.userid);
  if (res.status == 201) {
    naiveui.message.success(res.data.message);
    userStore.updatePoint();
  }
};
const showModal = ref<boolean>(false);
///put->false,add->true
const putOrAdd = ref<boolean>(false);
const bodyStyle = { width: "600px" };
const change = (re: rewardType) => {
  putOrAdd.value = false;
  showModal.value = true;
  name.value = re.reward_name;
  desc.value = re.description;
  point.value = re.points_cost;
  id.value = re.id;
};
const updateRewardList = inject<Function>("updateReward");
const name = ref<string>("");
const desc = ref<string>("");
const point = ref<number>(0);
const id = ref<number>(0);
const handlePutReword = async () => {
  showModal.value = false;
  const res = await putReward(id.value, name.value, desc.value, point.value);
  if (res.status == 200) {
    naiveui.message.success(res.data.message);
    await updateRewardList!();
  }
};
const handleAddReword = async () => {
  showModal.value = false;
  const res = await newReward(
    props.userid,
    name.value,
    desc.value,
    point.value
  );
  if (res.status == 201) {
    naiveui.message.success(res.data.message);
    await updateRewardList!();
  }
};
const addReward = () => {
  showModal.value = true;
  putOrAdd.value = true;
};
</script>
<template>
  <NCard>
    <NList hoverable clickable>
      <NListItem><NButton @click="addReward">新增奖励</NButton></NListItem>
      <NListItem v-for="reward in props.rewardList">
        <NFlex justify="space-between">
          <NText>{{ reward.reward_name }}</NText>
          <div>
            <NTag type="warning">{{ reward.points_cost }}</NTag>
            <NButton
              type="success"
              size="small"
              @click="handleReward(reward.id)"
              >兑换</NButton
            >
            <NButton type="info" size="small" @click="change(reward)"
              >修改</NButton
            >
          </div>
        </NFlex>
      </NListItem>
    </NList>
  </NCard>
  <n-modal
    v-model:show="showModal"
    class="custom-card"
    preset="card"
    :style="bodyStyle"
    :title="putOrAdd ? '奖励新增' : '奖励修改'"
    size="huge"
    :bordered="false"
  >
    <template #header-extra> 噢! </template>
    <NFlex>
      <NInput v-model:value="name" type="text" />
      <NInput v-model:value="desc" type="textarea" />
      <NInputNumber v-model:value="point" />
    </NFlex>
    <template #action>
      <NButton @click="handlePutReword" v-if="!putOrAdd"> 确认修改 </NButton>
      <NButton @click="handleAddReword" v-else> 确认新增 </NButton>
    </template>
  </n-modal>
</template>
